// Common variables, functions and mix-ins
// used in main code and also in a plug-ins

// Fonts
@font: Arial, Helvetica, sans-serif;

// windy red
@myred: #9d0300;
@lightred: rgba(148, 96, 81, 1); // lighten variant of above

// Foundation blue
@blue: #2a2448;

// Background steel gray
@mygray: #4d4d4d;
@mygrayT: rgba(0, 0, 0, 0.6); // transparent version

// Orange
@darkorange: #d49500;

// Color used for POIs on a map
@yellow: #ffe29c;

// UI yellow
@UIyellow: #fff3e1;

// text-shadow, box-shadow
@myshadow: 1px 1px 1px rgba(0, 0, 0, 0.63);
@uishadow: 0px 0px 4px black;

// Pastel white for backgrounds
@backgroundWhite: #f8f8f8;
@white: #f8f8f8;

// Default tooltip color
@tooltipColor: @mygray;

// Color
@pbColor: #e7e7e7;

@grayFont: #6b6b6b;
@mobile: 736px;
@tablet: 1024px;
@loginBlue: #337ab7;
@sidebarfonts: Georgia, Times, serif;

// Height of iOS status bar
@iosBar: 20px;
@iphoneXBar: 32px;
@iphoneXBottom: 18px;

// Shadows on all sides make font outline
@outline: -1px -1px 0 rgba(0, 0, 0, 0.45), 1px -1px 0 rgba(0, 0, 0, 0.45),
    -1px 1px 0 rgba(0, 0, 0, 0.45), 1px 1px 0 rgba(0, 0, 0, 0.45);

// Height of mobile header
@headerH: 40px;

// Height of mobile menu
@mmHeight: 45px;

// Height of mobile bottom
@bottomHeight: 0px;

// Width of desktop's rh bottom container
@rhBottomW: 300px;

// Taken from detailClasses
@legendBg: #dedede;
@separationLine: #e5e5e5; // table separation line
@tdWidth: 30px;

.iconfont2() {
    font-family: iconfont;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

.icon(@size:12px;@left:0;@top:0;@position:relative) {
    .iconfont2;
    position: @position;
    font-size: @size;
    left: @left;
    top: @top;
}

.boxshadow2() {
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.8);
}

.noanim() {
    -webkit-transition: none;
    transition: none;
}

.opacity(@time:0.3s;@delay:0s) {
    transition: @time opacity @delay;
    -webkit-transition: @time opacity @delay;
}

.disable() {
    .opacity();
    opacity: 0.6;
    pointer-events: none;
}

.enable() {
    opacity: 1;
    pointer-events: all;
}

// Retina screen
.retina( @content ) {
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (min--moz-device-pixel-ratio: 2),
        only screen and (-o-min-device-pixel-ratio: 2/1),
        only screen and (min-device-pixel-ratio: 2),
        only screen and (min-resolution: 192dpi),
        only screen and (min-resolution: 2dppx) {
        @content();
    }
}

// Mobile phone
.mobile( @content ) {
    @media only screen and (max-device-width: @mobile) {
        @content();
    }
}

// Tablet based on CSS in body
.tablet( @content ) {
    .tablet-version & {
        @content();
    }
}

// Mobile and tablet together based on @media queries
.mobileTablet( @content ) {
    @media screen and (max-device-width: @tablet) {
        @content();
    }
}

// Desktop only
.desktop( @content ) {
    @media only screen and (min-device-width: @mobile) {
        @content();
    }
}

// Increasing clickable area
// DO not forget to move element left/top
.increaseClickArea( @size: 10px ) {
    border: @size solid transparent;
    background-clip: padding-box;
}
